<template>
  <div class="about">
    <h1>自定义指令</h1>
    <div>
        <!--<p v-for="item in list"></p>-->
        <!--<p v-my-bind:class=""></p>-->
      <p v-directive-name="dataList">
          <!--<img src="" alt="" v-lazy>-->
        自定义指令的使用
      </p>
        <img src="" v-my-lazy="src" alt="">
        <el-button v-on:click="active = !active">更新active</el-button>
    </div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: 0,
                active: false,
                dataList:[
                    {name:"a"},
                    {name:"b"},
                    {name:"c"},
                ]
            };
        },
        directives: {
            directiveName: {
                bind(el,binding,vnode,oldVnode){

               /*     console.log("自定义指令中的updateBinding===>",binding);

                    let data = binding.value;
                    data.forEach(item=>{
                        let elNode = el.cloneNode();
                        elNode.innerHTML = item.name;
                    })*/

                    el.setAttribute("src", binding.value)

                }
            }
        },
        mounted(){

            console.log("mounted--1->", this.msg);
            this.msg = 1;

            console.log("mounted--2->", this.msg);
        },
        //beforeUpdate针对视图层的:也就是说 当视图层的数据发生改变或者渲染 才会触发这个生命周期函数
        beforeUpdate(){
            console.log("beforeUpdate--1->", this.msg);
            //直接修改视图层里的数据 会不会触发beforeUpdate?
            //如果视图层数据被改变会触发beforeUpdate,那么在beforeUpdate里再一次改变数据,此时是不会重复触发beforeUpdate
//            this.msg = 50;
            console.log("beforeUpdate--2->", this.msg);
        },
        updated(){
            //在updated中修改msg是会触发beforeUpdate的
            console.log("updated--1->", this.msg);
            this.msg = 100;
        }
    }
</script>
<style>

</style>
